<template>
  <div class="low-code-container">
    <ToolBar />
    <main class="content-main">
      <!-- 左侧组件列表 -->
      <section class="left">
        <ComponentList />
      </section>
      <!-- 中间画布 -->
      <section class="center">
        <Editor />
      </section>
      <!-- 右侧属性列表 -->
      <section class="right">
        <AttrSetting />
      </section>
    </main>
    <!-- 预览 -->
    <Preview modalType="modal" ref="preview" v-model="previewData" @valueChange="handleValueChange" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import './custom-components'
import EventBus from './EventBus'
import ToolBar from './ToolBar'
// import StyleList from "./StyleList"
import ComponentList from './ComponentList'
import Editor from './Editor'
import AttrSetting from './AttrSetting'
import Preview from './Preview'
import { deepCopy, ergodicList } from './lib/utils'

export default {
  data() {
    return {
      modalType: 'page',
      pageSetting: {
        globalTitleStyle: {}
      },
      componentList: [],
      isShow: false
    }
  },
  computed: {
    ...mapState('lowCode', {
      previewData: state => state.previewData
    })
  },
  methods: {
    handleValueChange(value) {
      // this.previewData = value
      console.log(value)
      this.$store.commit('lowCode/setPreviewData', value)
    }
  },
  created() {
    EventBus.$once('preview', () => {
      // 先保存到previewData
      const { canvasComponentList, pageSetting } = this.$store.state.lowCode
      ergodicList(canvasComponentList, component => {
        component.animations.list.forEach(animation => {
          animation.pending = false
        })
      })
      // const componentList = canvasComponentList.map(component => {
      //   const item = {
      //     ...component,
      //     style: {
      //       ...component.style
      //     },
      //     events: {
      //       ...component.events
      //     },
      //     props: {
      //       ...component.props
      //     }
      //   }

      //   if (item.tag.indexOf('picker') > -1 && item.props.value) {
      //     if (item.props.value instanceof Array) {
      //       item.props.value = item.props.value.map(date => moment(date))
      //     } else {
      //       const value = moment(item.props.value)
      //       item.props.value = value
      //     }
      //   }
      //   return item
      // })
      this.$store.commit('lowCode/setPreviewData', deepCopy({ componentList: canvasComponentList, pageSetting }))
      // const componentList = canvasComponentList
      // // this.pageSetting = pageSetting
      // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting})
      // this.$router.push('/multidimensionalAnalysis/agileKanbanPreview')
      const { previewData } = this.$store.state.lowCode
      this.$refs['preview'].show({ pageSetting: previewData.pageSetting, componentList: previewData.componentList })
      this.modalType = 'modal'
    })
  },
  mounted() {},
  components: {
    ToolBar,
    ComponentList,
    Editor,
    AttrSetting,
    Preview
  }
}
</script>

<style scoped lang="less">
@import url('./index.less');
</style>
